<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
    <style type="text/css">
    body{
    }
    .mui-bar-nav{
    	background: #3366cc;
    }
    .mui-bar-nav h1{
    	color: white;
    }
    #seainput{
    	background: #FFFFFF;
    	border-radius: 0;
    }
    .tuijian{
    	height: 520px;
    	background: #FFFFFF;
    }
    .tuijian>h4{
    	padding-top: 10px;
    	margin-left: 10px;
    	margin-bottom: 10px;
    	
    }
    #tuijianimg{
    	background: #FFFFFF;
    }
    .notice{
    	margin-top: 20px;
    	height: 220px;
    	background: #FFFFFF;
    }
    .noticeh{
    	padding-top: 10px;
    	margin-left: 10px;
    	margin-bottom: 10px;;
    }
    .noticenews{
    	border: 1px solid cornflowerblue;
    	color: #007AFF;
    }
    .noticewar{
    	border: 1px solid red;
    	color: red;
    }
    .last{
    	height: 150px;
    	background: #FFFFFF;
    	margin-top: 20px;
    }
    .last h4{
    	padding-top: 10px;
    	margin-left: 10px;
    	margin-bottom: 10px;
    }
    .last p{
    	margin-left: 10px;
    }
    </style>
</head>
<body>
	<div class="mui-content">
	    <header class="mui-bar mui-bar-nav">
	        <h1 class="mui-title">图书馆管理系统</h1>
	        <a href="#popover" class="mui-pull-right">
	    	<span class="mui-icon iconfont mui-icon mui-icon-plusempty" style="color: white;"></span>
	    	</a>	        	        
	    </header>
	    <!--点击出现菜单栏-->
		    <style type="text/css">
				#popover{
					height:190px;
					width:140px;
				}
			</style>
			<div id="popover" class="mui-popover">
				<div class="mui-scroll-wrapper">
				    <div class="mui-scroll">
					    <ul class="mui-table-view" id="popov">
					    	<li class="mui-table-view-cell"><a href="#"><span class="iconfont icon-tianjia"></span><label>我的服务</label></a></li>
					    	<li class="mui-table-view-cell"><a href="#"><span class=" iconfont icon-renyuan"><label>添加朋友</label></a></li>
					    	<li class="mui-table-view-cell"><a href="#"><span class="iconfont icon-saoyisao"><label>扫一扫</label></a></li>
					    	<li class="mui-table-view-cell"><a href="#"><span class="iconfont icon-shouqian"><label>更多</label></a></li>
					    </ul>
					</div>
				</div>
			</div>
			<!--轮播图-->
			<div id="slider" class="mui-slider" >
			  <div class="mui-slider-group mui-slider-loop">
			    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
			    <div class="mui-slider-item mui-slider-item-duplicate">
			      <a href="#">
			        <img src="images/index3.jpg" style="width: 400px;height: 200px;">
			      </a>
			    </div>
			    <!-- 第一张 -->
			    <div class="mui-slider-item">
			      <a href="#">
			        <img src="images/index1.png" style="width: 400px;height: 200px;">
			      </a>
			    </div>
			    <!-- 第二张 -->
			    <div class="mui-slider-item">
			      <a href="#">
			        <img src="images/index2.png" style="width: 400px;height: 200px;">
			      </a>
			    </div>
			    <!-- 第三张 -->
			    <div class="mui-slider-item">
			      <a href="#">
			        <img src="images/index3.jpg" style="width: 400px;height: 200px;">
			      </a>
			    </div>
			   
			    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
			    <div class="mui-slider-item mui-slider-item-duplicate">
			      <a href="#">
			        <img src="images/index1.png" style="width: 400px;height: 200px;">
			      </a>
			    </div>
			  </div>
			  <div class="mui-slider-indicator">
			    <div class="mui-indicator mui-active"></div>
			    <div class="mui-indicator"></div>
			    <div class="mui-indicator"></div>
			  </div>
			</div>
	    
	    <!--搜索框-->
	    <div class="mui-input-row mui-search" >
		    <input type="search" class="mui-input-clear" id="seainput" placeholder="查询图书">
		</div>
		<div class="tuijian">
			<h4>热门图书</h4>
			<ul class="mui-table-view mui-grid-view mui-grid-9" id="tuijianimg">
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#" id="xiangqing">
			        <img src="images/phpbook.jpg" style="width:150px;height: 150px;">
			        <div class="mui-media-body">php开发</div>
			    </a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			         <img src="images/c.jpg" style="width:150px;height: 150px;">
			        <div class="mui-media-body">c++</div>
			    </a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			        <img src="images/javascript.jpg" style="width:150px;height: 150px;">
			        <div class="mui-media-body">javascript</div>
			    </a>
			</li>
			<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
			    <a href="#">
			       <img src="images/c.jpg" style="width:150px;height: 150px;">
			        <div class="mui-media-body">java</div>
			    </a>
			</li>
			<a href="#" class="mui-pull-right" style="margin-top: 5px;margin-right: 5px;"><p>更多 > </p></a>
			   </ul>
			
		</div>
		<div class="notice">
			<!--通知公告-->
			<ul class="mui-table-view" id="ul2"  style="margin-top: 10px;">
				<h4 class="noticeh">通知公告</h4>

			<hr style="opacity: 0.4;" />
			    <li class="mui-table-view-cell mui-media">
			        <a href="javascript:;">
			            <div class="mui-media-body">			            	
			                <p> <a class="noticenews">新闻</a> ▪ 请同学们爱护机房设备,特别是凌伟杰同学</p>
			            </div>
			        </a>
			    </li>
			    <li class="mui-table-view-cell mui-media">
			        <a href="javascript:;">
			            <div class="mui-media-body">
			                <p><a class="noticewar">公告</a>  ▪ 关于对凌伟杰同学留校察看的公告</p>
			            </div>
			        </a>
			    </li>
			    <li class="mui-table-view-cell mui-media">
			        <a href="javascript:;">
			            <div class="mui-media-body">
			              <p> <a class="noticewar">公告</a> ▪ 请同学们爱护机房设备</p>
			            </div>
			        </a>
			    </li>
			    <a href="#" class="mui-pull-right" style="margin-top: 5px;margin-right: 5px;margin-bottom: 5px;"><p>更多 > </p></a>
			<!--    <hr style="opacity: 0.4;" />-->
			</ul>
		</div>
		<div class="last">
			<h4>入馆须知</h4>
			<hr style="opacity: 0.4;" />
			<p>1.不得携带危险物品进入馆内</p>
			<p>2. 证件进馆:有效读者证，身份证，学生证</p>
			<p>3. 图书馆开放时间:周一至周日 8:30--20：30 </p>
		</div>
	    
	    
	
	</div>
</body>
<script>
	//获得slider插件对象
	var gallery = mui('.mui-slider');
	gallery.slider({
	  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
	});
	document.getElementById('xiangqing').addEventListener('tap', function() {
		  //打开我的信息页面
		  mui.openWindow({
		    url: 'xiangqing.html', 
		    id:'xiangqing'
		  });
		});
</script>
</html>